<template>
	<view style="background-color: #F4F9FC;">
		<u-navbar style="color: #ffffff; background-color: transparent; " :autoBack="true" bgColor="#4388F1">
			<view class="u-nav-slot" slot="center">
				<u--text text="工资管理" color="#ffffff" align="center" size="20"></u--text>
			</view>
			<view class="u-nav-slot" slot="left">

			</view>
		</u-navbar>
		<view style="margin-top: 44px;">
			<view class="u-demo-block__content">
				<u-subsection :list="stulist" mode="button" keyName="name" bgColor="#4388F1" inactiveColor="#FFF"
					:current="current" fontSize="18" @change="change"></u-subsection>
			</view>
			<view style="text-align: center; display: flex; justify-content: center; margin-top: 9px;color:#2979ff ;"
				@click="show = true">
				{{monthNumber.replace(/\[|\]/g, '')}} <u-icon name="arrow-down-fill" color="#2979ff" size="16"></u-icon>
			</view>
			<u-datetime-picker :show="show" v-model="value1" mode="year-month" @confirm="confirm" @cancel="cancel"
				@close="close"></u-datetime-picker>
			<view>
				<view v-if="SendPayList?SendPayList.length!=0&&(i.companyId==nowCompanyId):1" class="cdlb"
					style="z-index: 0;background-color: #ffffff;border-radius: 0;" @click="todatile(i.id)"
					v-for="(i,k) in  SendPayList" :key="k">
					<view class="containera" style="border-bottom: 2rpx solid #EFEFEF;">
						<view class="salary-container">
							<view class="salary-label">公司</view>
							<view class="salary-time">{{ i.companyName }}<u-icon name="arrow-right" size="20"></u-icon>
							</view>
						</view>
					</view>
					<view class="containera" style="border-bottom: 2rpx solid #EFEFEF;">
						<view class="salary-container">
							<view class="salary-label">姓名:</view>
							<view class="salary-time">{{ i.name }}</view>
						</view>
					</view>
					<!-- <view class="containera" style="border-bottom: 2rpx solid #EFEFEF;">
						<view class="salary-container">
							<view class="salary-label">实发工资:</view>
							<view class="salary-time">{{ i.实发金额 }}</view>
						</view>
					</view>
					<view class="containera" style="border-bottom: 2rpx solid #EFEFEF;">
						<view class="salary-container">
							<view class="salary-label">应发工资:</view>
							<view class="salary-time">{{ i.应发工资合计 }}</view>
						</view>
					</view> -->
					<view class="containera" style="border-bottom: 2rpx solid #EFEFEF;">
						<view class="salary-container">
							<view class="salary-label">确认状态:</view>
							<view class="salary-time">
								<view class="aq"
									:style="{backgroundColor:i.state == 0 ? '#F1F1F1' : i.state == 1 ? '#48C300' : i.state == 2 ? '#DCECFD' : 'black' }">
									<view
										:style="{ color: i.state == 0 ? '#999999' : i.state == 1 ? '#fff' : i.state == 2 ? 'red' : 'black' }">
										{{ i.state == 2 ? '已提交工资有异议' : i.state == 0 ? '未确认' : '已确认' }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="container">
					<view class="background"></view>
					<view class="text">暂无工资记录</view>
				</view>
			</view>
		</view>
		<suse-tabbar :indexValue='0'></suse-tabbar>
	</view>
</template>
<style>
	.aq {
		background-color: #F1F1F1;
		padding: 7px;
		border-radius: 5px;
	}

	.containera {
		display: flex;
		align-items: center;
		/* 垂直居中 */
	}

	.salary-container {
		display: flex;
		width: 100%;
		/* 占据整行 */
		justify-content: space-between;
		/* 两端对齐 */
	}

	.salary-label {
		font-weight: bold;
		font-size: 14px;
		color: #333333;
		line-height: 21px;
		background-color: #DCECFD;
		/* 背景颜色 */
		flex: 0 0 30%;
		/* 占据30%的宽度 */
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px;
		/* 内边距 */
		box-sizing: border-box;
		/* 包括内边距和边框在内的总宽度 */
	}

	.salary-time {
		flex: 0 0 70%;
		/* 占据70%的宽度 */
		display: flex;
		align-items: center;
		justify-content: flex-end;
		/* 右对齐 */
		padding: 10px;
		/* 内边距 */
		box-sizing: border-box;
		/* 包括内边距和边框在内的总宽度 */
	}
</style>
<style>
	.demo-layout {
		background: #F5F9FC;
		height: 117rpx;
		height: 25px;
		/* border-radius: 4px; */
	}

	.bg-purple {
		background: #CED7E1;
	}
</style>
<script>
	import {
		nopagelist
	} from '@/common/api.js';
	export default {
		data() {
			return {
				goodsArr: [{
						val: '01月',
						name: '1月',
						isSelected: false
					},
					{
						val: '02月',
						name: '2月',
						isSelected: false
					},
					{
						val: '03月',
						name: '3月',
						isSelected: false
					},
					{
						val: '04月',
						name: '4月',
						isSelected: false
					},
					{
						val: '05月',
						name: '5月',
						isSelected: false
					},
					{
						val: '06月',
						name: '6月',
						isSelected: false
					},
					{
						val: '07月',
						name: '7月',
						isSelected: false
					},
					{
						val: '08月',
						name: '8月',
						isSelected: false
					},
					{
						val: '09月',
						name: '9月',
						isSelected: false
					},
					{
						val: '10月',
						name: '10月',
						isSelected: false
					},
					{
						val: '11月',
						name: '11月',
						isSelected: false
					},
					{
						val: '12月',
						name: '12月',
						isSelected: false
					}
				],
				// monthNumber:timeFormat(e.value, 'yyyy')+parseInt(timeFormat(e.value, 'mm'), 10),
				monthNumber: '',
				nowCompanyId: uni.getStorageSync("companyNameList")[0].id,
				value1: Number(new Date()),
				stulist: uni.getStorageSync("companyNameList"),
				SendPayList: [],
				current: 0,
				show: false,
				iconurl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/3.png'
			}
		},
		onLoad() {

			const timeFormat = uni.$u.timeFormat
			const app = getApp()
			this.monthNumber = timeFormat(Number(new Date()), '[yyyy年mm月]')
			// uni.removeStorageSync('phone');
			/* 	if (!uni.getStorageSync("phone")) {
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1500)
				}
				this.inoutlist(this.monthNumber)
				const currentMonth = new Date().getMonth() + 1; // 获取当前月份（1-12）
				this.goodsArr.forEach((item, index) => {
					item.isSelected = index + 1 === currentMonth; // 设置当前月份为选中状态
				}); */
			console.log("onload" + this.monthNumber)

		},
		methods: {
			selectItem(i, k) {
				console.log(i, k);
				// 先将所有项目的 isSelected 设置为 false
				this.goodsArr.forEach(item => {
					item.isSelected = false;
				});
				// 然后将特定索引 k 的 isSelected 设置为 true
				this.nowKey = k
				if (this.goodsArr[k]) {
					this.goodsArr[k].isSelected = true;
				}
			},
			close() {
				this.show = false
			},
			cancel() {
				this.show = false
			},
			confirm(e) {
				this.show = false
				this.monthNumber = uni.$u.timeFormat(e.value, '[yyyy年mm月]');
				this.inoutlist(this.monthNumber)
				console.log(this.monthNumber)
			},
			todatile(i) {
				console.log(i)
				uni.navigateTo({
					url: '/pages/dzxsz/detail?id=' + i
				})
			},
			change(index) {
				this.nowCompanyId = this.stulist[index].id
				this.current = index
				this.inoutlist(this.monthNumber)

			},
			inoutlist(i) {
				nopagelist({
					employeesPhone: uni.getStorageSync("phone"),
					time: i,
				}).then(res => {
					if (res.code == 200) {
						this.SendPayList = res.data.list
						let employeesData = [];
						employeesData = res.data.list.map(item => {
							let salaryDetails = JSON.parse(item.salaryDetails);
							console.log("#######" + salaryDetails)
							// 初始化一个空对象，用于存放解析后的工资详情
							const parsedDetails = {};
							// 遍历salaryDetails数组，将每一项解析为键值对
							salaryDetails.forEach(detail => {
								const [key, value] = detail.split(":");
								parsedDetails[key.trim()] = value.trim();
							});
							// 返回包含姓名和解析后工资详情的对象
							return {
								id: item.id,
								companyName: item.companyName,
								companyId: item.companyId,
								name: item.name,
								employeesId: item.employeesId,
								state: item.state,
								time: item.time,
								abnormal: item.abnormal,
								...parsedDetails
							};
						});
						this.SendPayList = employeesData
						console.log("####employeesData" + JSON.stringify(this.SendPayList))
					}

					console.log("employeesData" + JSON.parse(employeesData))
					console.log(this.SendPayList)
				}).catch(err => {

				})
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>
<style>
	// 容器
	.scrollContainer {
		width: 666rpx;
		height: 234rpx;
		white-space: nowrap;
	}

	// 容器项
	.scrollitem {
		display: inline-block;
		margin-left: 30rpx;
		height: 234rpx;
	}

	.scrollimage {
		width: 270rpx;
		height: 154rpx;
	}

	.recommandItemText {
		width: 270rpx;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.EmptyData {
		text-align: center;
		margin-top: 50rpx;
	}
</style>
<style lang="scss">
	.flex-row {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		white-space: nowrap;
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			width: 200rpx;
			height: 80rpx;
			text-align: center;
			margin-right: 20px;
			margin-left: 10px;
			margin-top: 10px;
			background-color: #FFF;
			border-radius: 24rpx;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				margin-right: 15px;

				&__image {
					width: 61px;
					height: 48px;
				}

				&__text {
					margin-top: 5px;
					color: $u-content-color;
					font-size: 12px;
					text-align: center;
				}

				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}

	page {
		background: #F4F9FC !important;

	}

	.container {
		position: relative;
		margin-top: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 220rpx;
		/* 背景图片高度 */
	}

	.background {
		// background-image: url('/static/image/dzxsz/no.png');
		background-size: contain;
		background-position: center;
		width: 220rpx;
		height: 220rpx;
	}

	.text {
		text-align: center;
		position: absolute;
		bottom: -130rpx;
		font-weight: bold;
		margin-top: 30rpx;
		font-size: 35rpx;
		/* 调整文字位置 */
	}

	.bgt {
		padding: 10px;
		height: 90vh;
		width: 100vw;
		background-size: contain;
		/* 或者使用其他适合的值，如100% */
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}

	.bgta {
		padding: 10px;
		height: 90vh;
		width: 100vw;
		background-size: auto;
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}

	.cdlb {
		background-color: #f1f1f1;
		border-radius: 10px 10px 10px 10px;
		margin: 50rpx;
		// padding: 5rpx;
	}

	.loginBut {
		width: 50%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 130rpx;
		color: #ffffff;
		background-color: #00AA5A;
		margin-top: 400rpx;
		margin: auto;
		border-radius: 10rpx;
	}

	.logininfo {
		height: 60rpx;
		border-bottom: 0.1rpx solid #E0E0E0;
		padding: 10px;
		margin-top: 15rpx;
		// .logininfo u-row {
		// 	color: #55aaff;
		// }

		.text {
			width: 68rpx;
			height: 44rpx;
			font-family: PingFang SC Bold, PingFang SC Bold;
			font-weight: 400;
			font-size: 32rpx;
			color: #55aaff;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

	}

	.loginBut {
		width: 50%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		margin-bottom: 40vh;
		color: #ffffff;
		background-color: #00AA5A;
		margin-top: 400rpx;
		margin: auto;
		border-radius: 10rpx;
	}
</style>